<!-- cj -->
<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <head th:include="/utils/common_css :: commonCss"></head>
    <link th:href="@{/static/css/data_table.css}" rel="stylesheet" type="text/css"/>
    <style>
        .cj-main-from {
            box-sizing: border-box;
            font-weight: 300;
            margin: 10px 30px;
            box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
        }

        .cj-form, .cj-form-preview {
            background-color: #ffffff;
            box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
            padding: 5px 30px;
            margin: 10px;
            float: left;
            min-height: 500px;
        }

        .cj-form {
            width: 55%;
            height: 100%;
            float: left;
        }

        .cj-form-preview {
            width: 40%;
            height: 100%;
            float: left;
        }

        .preview-img-main {
            width: 90%;
            height: 90%;
            margin: 5%;
        }

        .c-m-f-header {
            vertical-align: middle;
            text-align: left;
            display: table;
            table-layout: fixed;
            height: 60px;
            width: 100%;
            border-bottom: 1px solid #ebedf2;
            padding: 10px;
        }

        .c-m-f-bottom {
            vertical-align: middle;
            text-align: left;
            table-layout: fixed;
            width: 100%;
            height: 80px;
            /*       background-color: #f7f8fa;
                   border-color: #f7f8fa;*/
            padding: 20px;
        }

        .c-m-f-bottom .save {
            float: left;
        }

        .c-m-f-bottom .cancel {
            float: right;
        }

        .c-m-f-header h3 {
            display: table-cell;
            vertical-align: middle;
            font-size: 1.3rem;
            font-weight: 500;
            padding: 20px;
        }

        .c-m-f-content .form-group {
            border-bottom: 1px dashed #ebedf2;
            padding: 25px 30px;
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        .form-group .col-form-label {
            text-align: right;
        }

        .c-m-f-content .form-group-last {
            border-bottom: 0;
        }
    </style>
</head>
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
<div class="m-grid m-grid--hor m-grid--root m-page">
    <div th:replace="/utils/header :: header"></div>
    <div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
        <div th:replace="/utils/left_menu :: leftMenu"></div>
        <div class="cj-main">
            <div class="cj-main-header">
                <ul>
                    <li class="icon">
                        <i class="m-nav__link-icon la la-home"></i>
                    </li>
                    <li>
                        <a class="decoration">基础设置</a>
                    </li>
                    <li>
                        <a class="decoration" href="/admin/basic/banner">banner管理</a>
                    </li>
                    <li class="header-activity">
                        <a th:href="@{'/admin/basic/banner/edit/'+${banner.id}}">修改banner</a>
                    </li>
                </ul>
            </div>
            <div class="cj-main-from">
                <div class="cj-form-preview">
                    <div class="preview-img-main">
                        <canvas id="cvs" style="display: block;">
                        </canvas>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <div class="cj-form">
                    <div class="c-m-f-header">
                        <h3>活动信息修改</h3>
                    </div>

                    <div class="c-m-f-content">
                        <form id="form" class="col-xl-12 col-lg-12" onsubmit="return false" action="##" method="post"
                              enctype="multipart/form-data">
                            <input type="hidden" name="id"  th:value="${banner.id}">
                            <input type="hidden" name="createTime" th:value="${banner.createTime}">
                            <input type="hidden" name="type" th:value="${banner.type}">
                            <div class="form-group ">
                                <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font
                                        style="vertical-align: inherit;">
                                    活动标题：
                                </font></font></label>
                                <div class="col-lg-6">
                                    <input type="text" class="form-control m-input" id="title" name="title" required
                                           minlength="2" th:value="${banner.title}" placeholder="请输入活动标题">

                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font
                                        style="vertical-align: inherit;">
                                    状态：
                                </font></font></label>
                                <div class="col-lg-6">
                                    <div class="m-checkbox-list">
                                        <label class="m-radio">
                                            <input type="radio" name="state" value="1" th:checked="${banner.state==1}"><font
                                                style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                            活动中
                                        </font></font><span></span>
                                        </label>
                                        <label class="m-radio">
                                            <input type="radio" name="state" value="2" th:checked="${banner.state==2}"><font
                                                style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                            已结束
                                        </font></font><span></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font
                                        style="vertical-align: inherit;">
                                    图片展示：
                                </font></font></label>
                                <div class="col-6">
                                    <img th:src="${banner.imgUrl}" alt=""
                                         style="width: 312px; height: 312px">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font
                                        style="vertical-align: inherit;">
                                    上传图片
                                </font></font></label>
                                <div class="custom-file col-lg-6">
                                    <input id="customFile" name="customFile" type="file" class="custom-file-input"/>
                                    <label class="custom-file-label" for="customFile"><font
                                            style="vertical-align: inherit;"><font style="vertical-align: inherit;">

                                    </font></font></label>
                                </div>
                            </div>

                            <div class="c-m-f-bottom">
                                <button type="submit" class="btn btn-brand save"><font
                                        style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                    提交
                                </font></font>
                                </button>
                                <button type="reset" class="btn btn-secondary cancel" onclick="cancel()"><font
                                        style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                    取消
                                </font></font></button>
                            </div>

                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="/utils/common_js :: commonJS"></div>
<script th:src="@{/static/js/utils.js}" type="text/javascript"></script>
<script th:src="@{/static/js/ajax.js}" type="text/javascript"></script>
<script>


    $("#form").submit(function () {
        var formData = new FormData(document.getElementById("form"));
        formFileAjax("/admin/basic/update/banner",formData);
    });


    function cancel() {
        swal({
            position: "取消",
            type: "warning",
            title: "数据已取消保存！",
            showConfirmButton: 1,
            timer: 1500
        })
    }

    //定义一个数组存放图片地址 第一个为主图
    var imgArray = new Array();
    var cvsWidth = $(".preview-img-main").outerWidth(true);
    var cvsHeight = $(".preview-img-main").outerHeight(true);
    var cvs = document.getElementById("cvs");
    $(function () {
        document.getElementById("cvs").width = cvsWidth;
        document.getElementById("cvs").height = cvsHeight;
    });

    $('#customFile').change(function () {
        var val = this.value;
        //设定可上传的格式
        var upLoadType = '.jpg,.gif,.bmp,.png';
        //从字符串中抽出最后一次出现.之后的字符，并且转换成小写
        var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase();
        //查找后缀名是否符合条件，如果符合返回>=0，如果不符合则返回负数;
        var result = upLoadType.indexOf(fileExt);
        if (this.files.length === 0) {
            return;
        }
        //如果只有一个文件则只需要访问这个FileList对象中的第一个元素.
        var oFile = this.files[0];
        /*if (oFile.size / 2144 > 100) {
            swal("图片太大请重新调整图片的尺寸");
            return;
        }*/
        if (result < 0) {
            swal("请输入正确格式", "确定", "warning");
        }
        var oFReader = new FileReader();
        // 当图像文件加载后,转换成一个data:URL,传递到onload回调函数中
        oFReader.readAsDataURL(oFile);
        oFReader.onload = function (oFREvent) {
            var src = oFREvent.target.result;
            // 将用户上传的图片作为主图
            imgArray[0] = src;

            //创建image对象
            var imgObj = new Image();
            imgObj.src = src;
            //待图片加载完后，将其显示在canvas上
            imgObj.onload = function () {
                var ctx = cvs.getContext('2d');
                ctx.drawImage(this, 0, 0, cvsWidth, cvsHeight);
            }
        };
    });



</script>
</body>
</html>